<template>
  <div class="pictureAddView" style="font-family: 站酷快乐体2016修订版">
    <PictureAdd :picture="picture" :onSuccess="onSuccess" />
    <a-form
      v-if="picture"
      layout="vertical"
      style="font-family: 站酷快乐体2016修订版"
      :model="pictureForm"
      name="basic"
      autocomplete="off"
      @finish="onFinish"
    >
      <a-form-item name="pictureName">
        <a-input
          v-model:value="pictureForm.pictureName"
          placeholder="请输入你的图片名"
          allow-clear
        />
      </a-form-item>

      <a-form-item name="introduction">
        <a-textarea
          v-model:value="pictureForm.introduction"
          placeholder="请输入你的图片简介"
          :auto-size="{ minRows: 2, maxRows: 5 }"
          allow-clear
        />
      </a-form-item>

      <a-form-item name="category">
        <a-auto-complete
          v-model:value="pictureForm.category"
          placeholder="请输入图片的分类"
          :options="categoryOptions"
          allow-clear
        />
      </a-form-item>

      <a-form-item name="tags">
        <a-select
          v-model:value="pictureForm.tags"
          mode="tags"
          :options="tagOptions"
          placeholder="请输入图片的标签"
          allow-clear
        />
      </a-form-item>

      <a-form-item class="handlesubmit">
        <a-button
          type="primary"
          html-type="submit"
          style="
            font-family: 站酷快乐体2016修订版;
            font-size: 20px;
            margin: 0 auto;
            padding: 0px;
            width: 120px;
          "
          >提交</a-button
        >
      </a-form-item>
    </a-form>
  </div>
</template>

<script setup>
import PictureAdd from '@/components/picture/PictureAdd.vue'
import { PictureVO } from '@/common/PictureVO.js'
import { computed, onMounted, reactive, ref } from 'vue'
import { getbypicturevoid, getTagsAndCategory, updatePicture } from '@/api/picture.js'
import { message } from 'ant-design-vue'
import { useRoute } from 'vue-router'
const picture = ref('')

const tagOptions = ref([])
const categoryOptions = ref([])

const pictureForm = reactive({
  id: '',
  pictureName: '',
  introduction: '',
  category: '',
  tags: [],
})

const onFinish = async (values) => {
  if (!picture.value?.id) {
    message.error('您还没有上传图片')
    return
  }
  console.log('pictureForm :', pictureForm)
  try {
    const res = await updatePicture({
      ...pictureForm,
    })

    if (res.data.code === 0 && res.data.data) {
      message.success('图片信息上传成功!')
    } else {
      message.error('上传失败，请重试，原因：' + res.data.message)
    }
  } catch (e) {
    message.error('上传失败，请重试，原因：' + e.message)
  }
}
const onSuccess = (param) => {
  picture.value = param
  pictureForm.pictureName = picture?.value?.pictureName ?? ''
  pictureForm.id = picture?.value?.id ?? ''
}

const getTagsCate = async () => {
  try {
    const res = await getTagsAndCategory()
    if (res.data.code === 0 && res.data.data) {
      tagOptions.value = (res.data?.data?.tagList ?? []).map((data) => {
        return {
          value: data,
        }
      })

      categoryOptions.value = (res.data?.data?.categoryList ?? []).map((data) => {
        return {
          value: data,
        }
      })
    } else {
      message.error('出错了，原因：' + res.data.message)
    }
  } catch (e) {
    message.error('出错了，请刷新重试，原因：' + e.message)
  }
}

const route = useRoute()
const pictureId = computed(() => route.query.id)

//如果是有id就表示编辑图片，那么直接根据id来获取图片信息即可
const getPictureinfoByid = async () => {
  console.log(pictureId)
  if (pictureId?.value > 0) {
    try {
      const res = await getbypicturevoid({
        id: pictureId.value,
      })
      if (res.data.code === 0 && res.data.data) {
        const data = res.data.data
        picture.value = data
        pictureForm.id = data.id
        pictureForm.pictureName = data.pictureName
        pictureForm.introduction = data.introduction
        pictureForm.category = data.category
        pictureForm.tags = data.tags
      } else {
        message.error(res.data.message)
      }
    } catch (e) {
      message.error(e.message)
    }
  }
}

onMounted(() => {
  getTagsCate()
  getPictureinfoByid()
})
</script>

<style scoped>
.pictureAddView {
  max-width: 820px;
  margin: 5vw auto;
  padding: 5vh 5vw;
  background-color: rgba(28, 29, 30, 0.5);
  border-radius: 30px;
  border: solid 2px rgba(211, 211, 211, 0.3);
  background-position: center;
  backdrop-filter: blur(20px);
}

.pictureAddView .handlesubmit {
  text-align: center;
}
</style>
